<template>
  <van-nav-bar title="退货详情" left-text="返回" left-arrow @click-left="goBack" />
  <section class="aui-flexView">
    <!-- 订单详细 -->
    <section class="aui-scrollView">
      <!-- 订单状态 -->
      <div class="aui-pay-change">
        <div class="aui-flex">
          <div class="aui-flex-box">
            <h3>{{ info.status_text }}</h3>
          </div>
          <div class="aui-pay-zfb">
            <img src="/assets/images/icon-zfb.png" alt="" />
          </div>
        </div>
      </div>

      <!-- 退货地址 -->
      <div class="aui-flex">
        <div style="font-size: 16px">退货地址：</div>
        <div class="aui-flex-box">
          <h3>
            {{ info.factory.contact }} <em>{{ info.factory.mobile }}</em>
          </h3>
          <p>{{ info.factory.address }}</p>
        </div>
      </div>
      <div class="aui-flex">
        <div style="font-size: 16px">退货理由：</div>
        <div>{{ info.refundreason }}</div>
      </div>

      <!-- 寄件地址 -->
      <div class="aui-flex" v-if="Object.keys(depotinfo).length > 0">
        <div style="font-size: 16px">寄件地址：</div>
        <div class="aui-flex-box">
          <h3>
            {{ depotinfo.contact }} <em>{{ depotinfo.phone }}</em>
          </h3>
          <p>{{ depotinfo.address_text }}</p>
        </div>
      </div>

      <div class="aui-flex">
        <div style="font-size: 16px">商家协商：</div>
        <div>{{ info.examinereason }}</div>
      </div>

      <!-- 退货商品 -->
      <div class="aui-commodity-bg" style="background: transparent">
        <div
          v-for="item in info.info"
          :key="item.id"
          style="margin-bottom: 10px; background: #f5f5f5"
        >
          <div class="aui-flex">
            <div class="aui-commodity-img">
              <router-link
                :to="{ path: '/product/product/info', query: { proid: item.proid } }"
              >
                <img :src="item.product.thumbs_text" />
              </router-link>
            </div>
            <div class="aui-flex-box">
              <h4 class="van-ellipsis">商品名称：{{ item.product.name }}</h4>
              <p>商品单价：￥{{ item.price }}</p>
              <span class="aui-barter-time">七天退换</span>
            </div>
            <div>
              <h5>￥{{ item.total }}</h5>
              <p class="aui-sml-text">X{{ item.pronum }}</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 退货物流 -->
      <van-steps direction="vertical" :active="0">
        <van-step v-for="(item, index) in expressdata" :key="index">
          <h3>{{ item.status }}</h3>
          <p>{{ item.time }}</p>
        </van-step>
      </van-steps>
    </section>
  </section>
</template>
<script setup>
const { cookies } = useCookies();
const router = useRouter();
const route = useRoute();
const LoginUser = reactive(cookies.get("LoginUser"));
const orderid = ref(0);
const info = ref({
  factory: {},
  info: [],
});
const expressdata = ref([]);
const depotinfo = ref({});
const goBack = () => {
  router.push("/business/order/index");
};
onBeforeMount(() => {
  orderid.value = route.query.orderid ? route.query.orderid : 0;
  getorderInfoData();
});
const getorderInfoData = async () => {
  let result = await Api.orderInfo({
    busid: LoginUser.id,
    orderid: orderid.value,
  });
  if (result.code == 1) {
    info.value = result.data;
  }

  let res = await Api.orderRefundinfo({
    busid: LoginUser.id,
    orderid: orderid.value,
  });
  if (res.code == 1) {
    expressdata.value = res.data.express;
    depotinfo.value = res.data.depotinfo;
  }
};
</script>
<style>
@import url("/assets/css/info.css");
</style>
